<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 50px 0 5px;
				background-color: #fafafa;
			}
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 4px;
			}
			.footer-right {
				position: absolute;
				width: 50px;
				height: 50px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 5px;
				display: inline-block;
				font-size: 12px;
    			top: 5px;
			}
			.footer-center {
				height: 100%;
				padding: 5px 0px;
			}
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius: 5px;
			}
			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
			.footer-center .input-sound {
				background-color: #eee;
			}
			.mui-content {
				height: 100%;
				padding: 44px 0px 50px 0px;
				overflow: auto;
				background-color: #eaeaea;
			}
			#msg-list {
				height: 100%;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
			.msg-item {
				padding: 8px;
				clear: both;
			}
			.msg-item .mui-item-clear {
				clear: both;
			}
			.msg-item .msg-user {
				width: 38px;
				height: 38px;
				border: solid 1px #d3d3d3;
				display: inline-block;
				background: #fff;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				padding: 3px;
				color: #ddd;
			}
			
			.msg-item .msg-user-img{
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			.msg-item-self .msg-user,
			.msg-item-self .msg-content {
				float: right;
			}
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			}
			footer .mui-icon {
				color: #000;
			}
			footer .mui-icon:active {
				color: #007AFF !important;
			}
			footer .mui-icon-paperplane:before {
				content: "发送";
			}
			footer .mui-icon-paperplane {
				font-size: 16px;
				word-break: keep-all;
				line-height: 100%;
				padding-top: 6px;
				color: rgba(0, 135, 250, 1);
			}
			.rschedule {
				background-color: rgba(0, 0, 0, 0);
				border: 5px solid rgba(0, 183, 229, 0.9);
				opacity: .9;
				border-left: 5px solid rgba(0, 0, 0, 0);
				border-right: 5px solid rgba(0, 0, 0, 0);
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				-webkit-animation: spin 1s infinite linear;
				animation: spin 1s infinite linear;
			}
			.r-sigh{
				display: none;
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				text-align: center;
				line-height: 46px;
				font-size: 40px;
				font-weight: bold;
				color: #2187e7;
			}
			.rprogress-sigh{
				background-image: none !important;
			}
			.rprogress-sigh .rschedule{
				display: none !important;
			}
			.rprogress-sigh .r-sigh{
				display: block !important;
			}
			.rsalert {
				font-size: 12px;
				color: #bbb;
				text-align: center;
				position: absolute;
				border-radius: 5px;
				width: 130px;
				margin: 5px 5px;
				padding: 5px;
				left: 0px;
				bottom: 0px;
			}
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
		</style>
	</head>

	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">WBC聊天室</h1>
		</header>
		<div class="mui-content">
			<div id='msgList'>
				<!--<div class="msg-item msg-item-self">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							测试一下
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="msg-item">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							测试一下，就测试一下
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="msg-item msg-item-self">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							你瞅啥？
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="msg-item">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							瞅你咋滴？
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="msg-item msg-item-self">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							你瞅啥？
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="msg-item">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							瞅你咋滴？
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="msg-item msg-item-self">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							你瞅啥？
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="msg-item">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							瞅你咋滴？
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="msg-item msg-item-self">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							你瞅啥？
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>
				<div class="msg-item">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							故人西辞黄鹤楼，烟花三月下扬州，孤帆远影碧空尽，唯见长江天际流。
						</div>
						<div class="msg-content-arrow"></div>
					</div>
				</div>-->
				
				<!--<div class="mui-item-clear"></div>-->
			</div>
		</div>
		<footer>
			<div class="footer-center">
				<textarea id='msgText' type="text" class='input-text'></textarea>
			</div>
			<label id="sendBtn" class="footer-right">
				发送
			</label>
		</footer>
		<script src="js/mui.min.js"></script>
		<script src="js/talk.js"></script>
	</body>

</html>